<template>
  <div class="personnel-distribution-visualization bg-background text-foreground p-4">
    <h2 class="text-2xl font-bold mb-6">人员分布可视化</h2>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 h-[calc(100vh-200px)]">
      <!-- Map Section -->
      <div class="lg:col-span-2 bg-card text-card-foreground shadow-md rounded-lg p-4 flex flex-col">
        <div id="map" class="flex-grow rounded-lg overflow-hidden"></div>
      </div>

      <!-- Right Panel -->
      <div class="space-y-4 overflow-y-auto">
        <!-- Pie Chart -->
        <div class="bg-card text-card-foreground shadow-md rounded-lg p-4">
          <h2 class="text-xl font-bold mb-4">人流量统计分析</h2>
          <div class="h-64">
            <canvas ref="pieChart"></canvas>
          </div>
        </div>

        <!-- Video Monitoring -->
        <div class="bg-card text-card-foreground shadow-md rounded-lg p-4">
          <h2 class="text-xl font-bold mb-4">视频监控</h2>
          <div class="grid grid-cols-2 gap-2">
            <div class="bg-muted h-32 rounded flex items-center justify-center">
              <div class="w-full h-full bg-gray-300 flex items-center justify-center text-gray-600">
                视频监控 A
              </div>
            </div>
            <div class="bg-muted h-32 rounded flex items-center justify-center">
              <div class="w-full h-full bg-gray-300 flex items-center justify-center text-gray-600">
                视频监控 B
              </div>
            </div>
          </div>
          <div class="mt-2 text-center text-sm text-muted-foreground">
            <span class="mr-4">路口A</span>
            <span>路口B</span>
          </div>
        </div>

        <!-- Alert Panel -->
        <div class="bg-card text-card-foreground shadow-md rounded-lg p-4">
          <h2 class="text-xl font-bold mb-4">报警提示</h2>
          <ul class="space-y-2">
            <li v-for="(alert, index) in alerts" :key="index" class="flex justify-between">
              <span>{{ alert.message }}</span>
              <span class="text-muted-foreground">{{ alert.time }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { UserIcon, MapPinIcon } from 'lucide-vue-next'
import Chart from 'chart.js/auto'
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { fromLonLat } from 'ol/proj'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { Style, Circle, Fill, Stroke } from 'ol/style'

const pieChart = ref(null)

const alerts = ref([
  { message: 'RYGJ-001 综合服务区人员密度过大', time: '11: 00' },
  { message: 'RYGJ-001 综合服务区人员密度过大', time: '11: 00' },
  { message: 'RYGJ-001 综合服务区人员密度过大', time: '11: 00' },
  { message: 'RYGJ-001 综合服务区人员密度过大', time: '11: 00' },
  { message: 'RYGJ-001 综合服务区人员密度过大', time: '11: 00' },
  { message: 'RYGJ-001 综合服务区人员密度过大', time: '11: 00' }
])

onMounted(() => {
  initMap()
  initPieChart()
})

function initMap() {
  const daliCoordinates = fromLonLat([109.9426, 34.7951]) // 大荔县的经纬度坐标

  const map = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    view: new View({
      center: daliCoordinates,
      zoom: 13
    })
  })

  // 添加热力图
  const heatmapLayer = new VectorLayer({
    source: new VectorSource({
      features: [
        new Feature(new Point(fromLonLat([109.93, 34.78]))),
        new Feature(new Point(fromLonLat([109.95, 34.80]))),
        new Feature(new Point(fromLonLat([109.97, 34.79])))
      ]
    }),
    style: new Style({
      image: new Circle({
        radius: 15,
        fill: new Fill({
          color: 'rgba(255, 0, 0, 0.3)'
        }),
        stroke: new Stroke({
          color: 'rgba(255, 0, 0, 0.7)',
          width: 2
        })
      })
    })
  })

  map.addLayer(heatmapLayer)

  // 添加人员图标
  const personLayer = new VectorLayer({
    source: new VectorSource({
      features: [
        new Feature(new Point(fromLonLat([109.94, 34.79]))),
        new Feature(new Point(fromLonLat([109.96, 34.81]))),
        new Feature(new Point(fromLonLat([109.92, 34.80])))
      ]
    }),
    style: new Style({
      image: new Circle({
        radius: 6,
        fill: new Fill({
          color: 'blue'
        }),
        stroke: new Stroke({
          color: 'white',
          width: 2
        })
      })
    })
  })

  map.addLayer(personLayer)
}

function initPieChart() {
  const ctx = pieChart.value.getContext('2d')
  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['综合服务区', '现代农业区', '科技创业园', '农业机械区', '农产品加工区'],
      datasets: [{
        data: [22, 22, 22, 22, 12],
        backgroundColor: [
          'rgba(255, 99, 132, 0.8)',   // 红色
          'rgba(54, 162, 235, 0.8)',   // 蓝色
          'rgba(255, 206, 86, 0.8)',   // 黄色
          'rgba(75, 192, 192, 0.8)',   // 青色
          'rgba(153, 102, 255, 0.8)',  // 紫色
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'right',
        },
        title: {
          display: true,
          text: '人流量统计分析'
        }
      }
    }
  })
}
</script>

<style scoped>
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

.bg-gradient-radial {
  background-image: radial-gradient(circle, var(--tw-gradient-stops));
  animation: pulse 2s infinite;
}

/* 确保地图容器填满其父元素 */
#map {
  width: 100%;
  height: 100%;
}
</style>
